<template>
  <view class="page">
    <fu-custom :isBack="true" bgColor="bg-white"><view slot="content">{{i18n['全部评价']}}</view></fu-custom>
    <!-- 顶部导航 start -->
    <view class="tab-bar" :style="{ top: CustomBar + 'px' }">
      <!-- <view class="navbar solid-top flex">
        <block v-for="(item, index) in tabs" :key="index">
          <view class="flex-sub flex justify-center">
            <view class="tab-item" :class="{ active: currentTab == index }" @tap="switchTab(index, item.type_name)">
              <text>
                {{ item.type_title }}
                <text v-if="item.type_count">{{ item.type_count }}</text>
              </text>
            </view>
          </view>
        </block>
      </view> -->
      <view class="filter_type solid-top" >
        <text
          v-for="(item, index) in tabs"
          :key="index"
          class="list-item ml-20 padding-tb-xs padding-lr text-sm text-333 round"
          :class="[{ active2: currentTab == index }]"
          @click="switchTab(index, item.type_name)"
        >
          {{ item.type_title }}
           <text v-if="item.type_count">{{ item.type_count }}</text>
        </text>
    
          
      </view>
    </view>
    <!-- 顶部导航 end -->
    <!-- 页面加载 loading start-->
    <fu-loading v-if="isShowLoading"></fu-loading>
    <!-- 页面加载 loading end-->
    <block v-else>
      <view class="border-bottom">
          
      </view>
      <!-- 评价内容列表 start-->
      <view class="bg-white padding-lr">
        <view v-for="item in lists" :key="item.name" @click="goDetail(item)">
          <fu-evaluate :prop="item"></fu-evaluate>
        </view>
      </view>
      <!-- 评价内容列表 end-->
      <!-- 空布局  start-->
      <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
      <!-- 空布局  end-->
      <!-- 底部加载描述语 start -->
      <uni-load-more v-if="lists.length >= 5" :status="status"></uni-load-more>
      <!-- 底部加载描述语 end -->
    </block>
    <!-- 网络检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络检测 end -->
  </view>
</template>

<script>
import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
export default {
  components: {
    fuEvaluate
  },
  data() {
    return {
      filterTypeList: [
        {
          name: global.i18n['全部'],
          filter_type: ''
        },
        {
          name: global.i18n['有文字'],
          filter_type: 'content'
        },
        {
          name:  global.i18n['有图'],
          filter_type: 'thumb'
        },
        {
          name:  global.i18n['有视频'],
          filter_type: 'video'
        }
      ], //分类查询
      tabs: [], //导航分类
      type_name: 'all', //导航分类 选中
      filter_type: '', //分类查询 选中
      currentTab: 0, //选中的序号
      isShowLoading: false, //页面加载 loading
      lists: [], //评论列表
      page: 1, //页码数
      list_rows: 10, // 一页几条
      status: 'more', //底部 加载状态
      isInit: false, // 页面是否初始化
      goods_id: 0 //商品id
    };
  },
  /**
   * @param {Object} options  goods_id:商品id
   */
  onLoad(options) {
    const { goods_id } = options;
    this.goods_id = goods_id;
    this.loadData(true);
  },
  /**
   * @description  下拉加载
   */
  onPullDownRefresh() {
    this.page = 1;
    this.status = 'more';
    this.loadData(true);
  },

  /**
   * @description  触底加载
   */
  onReachBottom() {
    this.loadData();
  },
  methods: {
    /**
     * @event 点击评论去往评论详情
     */
    goDetail(item) {
      console.log('xxxxx');
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/comment-detail/index',
        params: item
      });
    },
    /**
     * @description  过滤条件切换
     * @param {Object} item   filter_type：过滤条件的描述语
     */
    filterTypeChoice(item) {
      this.filter_type = item.filter_type;
      this.page = 1;
      this.status = 'more';
      this.loadData(true);
    },
    /**
     * @description  导航描述语
     * @param {Object} index 导航序号
     * @param {Object} val  导航描述语
     */
    switchTab(index, val) {
      console.log(index, val);
      this.type_name = val;
      this.currentTab = index;
      this.page = 1;
      this.status = 'more';
      this.loadData(true);
    },
    /**
     * @description 获取数据列表
     * @param {Object} value  是否显示页面loading 显示
     */
    loadData(value) {
      if (this.status != 'more') return;
      this.status = 'loading';
      if (this.page == 1 && value) {
        this.isShowLoading = true;
      }
      this.$api
        .post(global.apiUrls.postGoodsCommentList, {
          goods_id: this.goods_id,
          page: this.page,
          list_rows: this.list_rows,
          star_type: this.type_name,
          filter_type: this.filter_type,
					user_id: this.$store.getters.uid,
        })
        .then(res => {
          this.isShowLoading = false;
          this.isInit = true;
          if (res.data.code == 1) {
            let list = res.data.data.list;
            this.tabs = res.data.data.tabList;

            let total = res.data.data.total;
            if (this.page == 1) this.lists = [];
            this.lists = this.lists.concat(list);
            if (this.lists.length >= total) {
              this.status = 'noMore';
            } else {
              this.status = 'more';
              this.page++;
            }
            this.$nextTick(() => {
              uni.stopPullDownRefresh();
            });
          }
        })
        .catch(err => {
          this.isShowLoading = false;
          this.isInit = true;
          this.status = 'more';
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #ffffff;
}

// 顶部导航 start
.tab-bar {
  position: sticky;
  z-index: 999;
  background-color: #FFFFFF;
}

// 顶部导航 start
.navbar {
  display: flex;
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);

  .tab-item {
    border-bottom: 4rpx solid #ffffff;
    font-size: 28rpx;
    color: #999999;
  }

  .tab-item.active {
    font-size: 32rpx;
    color: #333333;
    border-color: $theme;
    font-weight: bold;
  }
}

// 顶部导航 end
// 分类搜索导航 start
.list-item {
  background-color: #f8f8f8;
  display: inline-block;
  margin-bottom: 20rpx;
}

.ml-20 {
  margin-left: 20rpx;
}

.filter_type {
  padding: 20rpx;
  position: sticky;
  background: #ffffff;
  width: 100%;
  z-index: 999;
}

// 分类搜索导航 end
// 选中的分类 start
.active2 {
  /* box-shadow: inset 0 0 1rpx 1rpx $theme; */
  border: 1px solid #FF6464;
  background-color: rgba(240, 35, 37, 0.1) !important;
  color: $theme;
}

// 选中的分类 end
.border-bottom{
  width: 100%;
height: 20rpx;
background: #F8F8F8;
}
</style>
